<template>
	<div class="memberRelation">
		<el-card>
			<div class="Search">
				<el-input placeholder="输入会员ID查询" v-model="fy.memberId" @keyup.enter.native="SearchVip"
					style="width: 300px;margin-left: 20px;"></el-input>
				<el-button type="primary" @click="SearchVip()">查询</el-button>
			</div>
			<el-table v-if=(!this.id.id) row-key="memberId" lazy border :header-cell-style="{
          background: 'rgba(247,249,255,1)',
          color: 'rgba(0,6,32,0.87)',
        }" :default-sort="{ prop: 'data', order: 'descending' }"
				:tree-props="{ children: 'childrenVos', hasChildren: 'true' }" :data="tableData" style="width: 100%">
				<el-table-column label="会员ID" prop="memberId"> </el-table-column>
				<el-table-column label="会员昵称" prop="nickName"> </el-table-column>
				<el-table-column label="会员用户名/手机号" prop="userName"> </el-table-column>
				<!-- <el-table-column label="身份标识" prop="userName">
					<template slot-scope="scope">
						<span v-if="scope.row.identity == 0">无</span>
						<span v-if="scope.row.identity == 1">销售员</span>
						<span v-if="scope.row.identity == 2">云店</span>
					</template>
				</el-table-column> -->
			</el-table>
			<el-table v-else row-key="memberId" lazy border :header-cell-style="{
			  background: 'rgba(247,249,255,1)',
			  color: 'rgba(0,6,32,0.87)',
			}" :default-sort="{ prop: 'data', order: 'descending' }" :data="tableData1" style="width: 100%">
				<el-table-column label="会员ID" prop="memberId"> </el-table-column>
				<el-table-column label="会员昵称" prop="nickName"> </el-table-column>
				<el-table-column label="会员用户名/手机号" prop="userName"> </el-table-column>
				<!-- <el-table-column label="身份标识" prop="userName">
						<template slot-scope="scope">
							<span v-if="scope.row.identity == 0">无</span>
							<span v-if="scope.row.identity == 1">销售员</span>
							<span v-if="scope.row.identity == 2">云店</span>
						</template>
					</el-table-column> -->
			</el-table>
			<el-pagination v-if=(!this.id.id) @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:page-sizes="[10, 15]" :page-size="fy.size" layout="total, sizes, prev, pager, next, jumper"
				:total="total">
			</el-pagination>
		</el-card>
	</div>
</template>

<script>
	import * as VipApi from "@/api/Add";
	export default {
		data() {
			return {
				tableData: [],
				tableData1: [],
				fy: {
					size: 10,
					current: 1,
					memberId: "",
				},
				total: 0,
				id: {
					id: ''
				},
			};
		},
		methods: {
			SearchVip() {
				this.id.id = ''
				VipApi.SearchRelation(this.fy).then((res) => {
					this.total = res.data.total;
					this.tableData = res.data.records;
				});
			},
			handleSizeChange(value) {
				this.fy.size = value;
				this.SearchVip();
			},
			handleCurrentChange(value) {
				this.fy.current = value;
				this.SearchVip();
			},
			SearchVip1(id) {
				VipApi.SearchRelation1(this.id).then((res) => {
					this.tableData1 = res.data;
				});
			}
		},
		mounted() {
			this.id.id = this.$route.query.id
			if (this.id.id) {
				this.SearchVip1(this.id.id)
			} else {
				this.SearchVip();
			}
		},
	};
</script>

<style lang="scss" scoped>
	.el-table {
		margin-top: 40px;
	}

	.el-tree {
		margin-top: 10px;
	}

	.el-card {
		width: 98%;
		margin-top: 10px;
		margin-left: 10px;
	}

	.Search {
		display: flex;
	}

	.el-input {
		width: 20%;
	}

	.Search .el-button {
		margin-left: 20px;
	}

	.el-pagination {
		margin-top: 10px;
	}
</style>
